<template>
  <div class="content" :style="{ width: imgWidth, height: imgHeight }">
    <img :src="currentImage.imageUrl" ref="imgs" />
    <canvas ref="markCanvas" tabindex="0"></canvas>
    <div class="routate" ref="draggableElement">
      <el-select
        v-model="questiontype"
        placeholder="请选择"
        @change="modeltypetab"
      >
        <el-option
          v-for="item in questionList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button type="primary">{{
        circleselectionstatus == 0
          ? "圈选"
          : circleselectionstatus == 1
          ? "圈选中"
          : "取消圈选"
      }}</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { draw, getJudge, delDraw } from "@/utils/drawCropper"; // 矩形绘制方法
import { get, post, del, put, dele } from "../../request/api.js";
export default {
  name: "marks",
  props: ["imageUrllist", "parentData", "modelarealistcavans", "pagevale"],
  data() {
    return {
      // imageUrl: require('../../assets/image/cardmodle.jpg'),
      scale: 1,
      markList: [
        // {
        //  h:327,
        //  w:618,
        //  x:858,
        //  y:511,
        //  options:[
        //   {
        // 	  h:22,
        // 	  w:44,
        // 	  x:875,
        // 	  y:518,
        //   },
        //   {
        // 	  h:22,
        // 	  w:44,
        // 	  x:936,
        // 	  y:518,
        //   }
        //  ]
        // }
      ], // 标记内容数组
      isDrawing: false,
      questiontype: "",
      questionList: [
        {
          name: "定位点",
          id: 1,
        },
        {
          name: "文字定位",
          id: 2,
        },
      ],
      currentIndex: 0, // 当前图片索引
      currentImage: {},
      images: [],
      value: "第1张",
      imgWidth: "",
      imgHeight: "",
      lastClickTime: 0,
      clickDelay: 300,
      defaultTemplatePointType: null,
    };
  },
  watch: {
    markList: function (val, oval) {
      this.$emit("updateMarkList", val);
    },
    modelarealistcavans: {
      handler(val, ova) {
        // //console.info(val)
        this.markList = val;
        setTimeout(() => {
          this.initCanvas(2); // 画布初始化
        }, 1000);
      },
      deep: true,
    },
    pagevale(val, oval) {
      this.currentImage = this.images[val - 1]; // 更新当前图片
    },
    imageUrllist: {
      handler(val, ova) {
        // //console.info(this.pagevale)
        this.images = val;
        this.currentImage = val[this.pagevale - 1]; // 初始化当前图片
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.initCanvas(1); // 画布初始化
    }, 100);
    // this.currentImage = this.imageUrllist[this.currentIndex]; // 初始化当前图片
    document.addEventListener("customMouseDown", (event) => {
      // //console.log(event);
    });
  },
  components: {},
  computed: {
    ...mapState(["circleselectionstatus"]), // 从 Vuex 中获取状态
  },
  methods: {
    getDraggableElement() {
      return this.$refs.draggableElement;
    },
    modeltypetab(val) {
      this.isDrawing = true;
      this.$emit("modeltype", val);
      // 设置默认的templatePointType
      this.defaultTemplatePointType = val; // 保存当前选择的类型
      this.startCrop();
    },
    startCrop() {
      let cav = this.$refs.markCanvas;
      // 在创建新区域时使用保存的类型
      const newArea = {
        templatePointType: this.defaultTemplatePointType, // 使用选择的类型
        // ... 其他属性
      };
      draw(cav, this.modelarealistcavans, undefined, this.isDrawing);
    },
    /* 画布初始化 */
    initCanvas(num) {
      let that = this;
      this.$nextTick(() => {
        // 初始化canvas宽高
        let cav = that.$refs.markCanvas;
        let ctx = cav.getContext("2d");
        ctx.strokeStyle = "#295CFF";
        cav.style.cursor = "crosshair";
        const img = that.$refs.imgs;
        if (num == 1) {
          img.onload = () => {
            cav.width = img.naturalWidth;
            cav.height = img.naturalHeight;
            that.imgHeight = img.naturalHeight;
            that.imgWidth = img.naturalWidth;
            // 计算使用变量
            // //console.info(that.markList)
            const newaylist = that.markList.filter((item) => !item.id);
            if (newaylist.length > 0) {
              let newayy =
                that.markList.length > 0
                  ? that.markList[that.markList.length - 1]
                  : null;
              that.markList.map((item) => {
                if (item.w == newayy.w) {
                  item.templatePointType = this.questiontype;
                }
              });
            }
            let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
            // 若list长度不为0, 则显示已标记框
            if (list.length !== 0) {
              // //console.info('dddddd')
              list.forEach(function (value, index, array) {
                ctx.clearRect(value.x, value.y, value.w, value.h);
                // 遍历绘制所有标记框
                ctx.beginPath();
                ctx.strokeStyle = "#295CFF";
                ctx.fillStyle = "RGBA(102,102,102,0.2)"; // 设置背景颜色为蓝色
                ctx.rect(value.x, value.y, value.w, value.h);
                ctx.stroke();
                // 添加透明背景
                ctx.fillStyle = "rgba(135, 206, 235, 0.2)"; // 设置背景颜色为半透明白色
                ctx.fillRect(value.x, value.y, value.w, value.h); // 填充矩形

                // 新增题型显示 - 统一样式
                const typeButtonWidth = 80;
                const typeButtonHeight = 24;

                // 绘制文字背景 - 贴着矩形框顶部
                ctx.fillStyle = "#295CFF";
                ctx.fillRect(
                  value.x,
                  value.y - typeButtonHeight,
                  typeButtonWidth,
                  typeButtonHeight
                );

                // 设置文字样式
                ctx.fillStyle = "white";
                ctx.font = "14px Microsoft YaHei";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";

                // 根据templatePointType显示不同内容
                let typeText = "";
                switch (value.templatePointType) {
                  case 1:
                    typeText = "定位点";
                    break;
                  case 2:
                    typeText = "文字定位点";
                    break;
                  case 3:
                    typeText = "缺考标记";
                    break;
                  case 4:
                    typeText = "条形码";
                    break;
                  case 5:
                    typeText = "考号填涂";
                    break;
                  case 6:
                    typeText = "客观题";
                    break;
                  default:
                    typeText = "主观题";
                }
                let name =
                  value.includedNumbers != undefined
                    ? value.includedNumbers
                    : "";
                // 绘制文字 - 调整文字垂直位置，确保居中
                ctx.fillText(
                  typeText + name,
                  value.x + typeButtonWidth / 2,
                  value.y - typeButtonHeight / 2
                );
              });
            }
            cav.addEventListener("click", function (event) {
              const rect = cav.getBoundingClientRect();
              const x = event.clientX - rect.left;
              const y = event.clientY - rect.top;
              that.handleCanvasClick(x, y);
            });
            // 调用封装的绘制方法
            draw(cav, list, undefined, this.isDrawing);
          };
        } else {
          cav.width = img.naturalWidth;
          cav.height = img.naturalHeight;
          that.imgHeight = img.naturalHeight;
          that.imgWidth = img.naturalWidth;
          // 计算使用变量
          // //console.info(that.markList)
          const newaylist = that.markList.filter((item) => !item.id);
          if (newaylist.length > 0) {
            let newayy =
              that.markList.length > 0
                ? that.markList[that.markList.length - 1]
                : null;
            that.markList.map((item) => {
              if (item.w == newayy.w) {
                item.templatePointType = this.questiontype;
              }
            });
          }
          let list = that.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
          // 若list长度不为0, 则显示已标记框
          if (list.length !== 0) {
            // //console.info('dddddd')
            list.forEach(function (value, index, array) {
              ctx.clearRect(value.x, value.y, value.w, value.h);
              // 遍历绘制所有标记框
              ctx.beginPath();
              ctx.strokeStyle = "#295CFF";
              ctx.rect(value.x, value.y, value.w, value.h);
              ctx.stroke();
              // 添加透明背景
              ctx.fillStyle = "rgba(135, 206, 235, 0.2)"; // 设置背景颜色为半透明白色
              ctx.fillRect(value.x, value.y, value.w, value.h); // 填充矩形

              // 新增题型显示 - 统一样式
              const typeButtonWidth = 80;
              const typeButtonHeight = 24;

              // 绘制文字背景 - 贴着矩形框顶部
              ctx.fillStyle = "#295CFF";
              ctx.fillRect(
                value.x,
                value.y - typeButtonHeight,
                typeButtonWidth,
                typeButtonHeight
              );

              // 设置文字样式
              ctx.fillStyle = "white";
              ctx.font = "14px Microsoft YaHei";
              ctx.textAlign = "center";
              ctx.textBaseline = "middle";

              // 根据templatePointType显示不同内容
              let typeText = "";
              switch (value.templatePointType) {
                case 1:
                  typeText = "定位点";
                  break;
                case 2:
                  typeText = "文字定位点";
                  break;
                case 3:
                  typeText = "缺考标记";
                  break;
                case 4:
                  typeText = "条形码";
                  break;
                case 5:
                  typeText = "考号填涂";
                  break;
                case 6:
                  typeText = "客观题";
                  break;
                default:
                  typeText = "主观题";
              }
              let name =
                value.includedNumbers != undefined ? value.includedNumbers : "";
              // 绘制文字 - 调整文字垂直位置，确保居中
              ctx.fillText(
                typeText + name,
                value.x + typeButtonWidth / 2,
                value.y - typeButtonHeight / 2
              );
            });
          }
          cav.addEventListener("click", function (event) {
            const rect = cav.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            that.handleCanvasClick(x, y);
          });
          // //console.info(list)
          // 调用封装的绘制方法
          draw(cav, list, undefined, this.isDrawing);
        }
      });
    },
    // 计算按钮位置
    getButtonPositions(mark) {
      const buttonWidth = 60;
      const buttonHeight = 20;
      const buttonMargin = 5;

      const editButtonX = mark.x + mark.w - buttonWidth - buttonMargin;
      const editButtonY = mark.y + mark.h + buttonMargin;
      const deleteButtonX = editButtonX - buttonWidth - buttonMargin;
      const deleteButtonY = editButtonY;

      return {
        edit: {
          x: editButtonX,
          y: editButtonY,
          width: buttonWidth,
          height: buttonHeight,
        },
        delete: {
          x: deleteButtonX,
          y: deleteButtonY,
          width: buttonWidth,
          height: buttonHeight,
        },
      };
    },

    // 检查点击是否在按钮区域内
    isClickInButton(x, y, button) {
      return (
        x > button.x &&
        x < button.x + button.width &&
        y > button.y &&
        y < button.y + button.height
      );
    },

    // 处理画布点击
    handleCanvasClick(x, y) {
      // 检查点击时间间隔
      const now = Date.now();
      if (now - this.lastClickTime < this.clickDelay) {
        return;
      }
      this.lastClickTime = now;

      if (this.isProcessing) return;

      let list = this.markList;
      let handled = false;

      list.some((mark, index) => {
        if (handled) return true;

        const buttons = this.getButtonPositions(mark);

        if (this.isClickInButton(x, y, buttons.edit)) {
          handled = true;
          this.handleEdit(mark);
          return true;
        }

        if (this.isClickInButton(x, y, buttons.delete)) {
          handled = true;
          this.handleMarkDelete(mark, index);
          return true;
        }

        return false;
      });
    },

    // 处理编辑
    handleEdit(mark) {
      // 防止重复处理
      if (this.isProcessing) return;

      try {
        this.isProcessing = true;
        let obj = { ishow: true };
        const mergedObj = Object.assign({}, obj, mark);
        this.$emit("editContent", mergedObj);
        //console.info('编辑按钮被点击', mark); // 添加mark信息以便调试
        // 这里添加你的编辑逻辑
      } finally {
        this.isProcessing = false;
      }
    },

    // 处理删除
    async handleMarkDelete(mark, index) {
      try {
        this.isProcessing = true;

        if (mark.id) {
          // 删除服务器数据
          await this.deleteFromServer(mark.id);
        } else {
          // 删除本地数据
          this.deleteLocal(index);
        }
      } finally {
        this.isProcessing = false;
      }
    },

    // 从服务器删除
    async deleteFromServer(id) {
      try {
        const res = await dele(
          "/template/cuttingregion/delete",
          { id },
          {
            headers: {
              "Content-Type": "x-www-form-urlencoded",
            },
          }
        );

        if (res.code === 200) {
          this.$message.success("删除成功");
          this.$emit("refreshdata");
        } else {
          throw new Error(res.message || "删除失败");
        }
      } catch (error) {
        console.error("Delete error:", error);
        this.$message.error(error.message || "删除失败");
        throw error;
      }
    },

    // 本地删除
    deleteLocal(index) {
      this.markList.splice(index, 1);
      this.$message.success("删除成功");
    },
  },
  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener("customMouseDown", (event) => {});
  },
};
</script>
<style scoped>
.content {
  position: relative;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  z-index: 9;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.routate {
  position: fixed;
  left: 25px;
  top: 110px;
  background: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  font-size: 14px;
  color: #557292;
  border-radius: 10px;
  z-index: 111;
  /* transform: translateX(-50%); */
}
.el-select,
.el-input {
  width: 100px;
}
.el-select {
  margin-right: 10px;
  margin-left: 10px;
}
.el-input {
  margin-left: 10px;
  margin-right: 10px;
}
.routate >>> .el-button {
  border-radius: 10px;
  height: 35px;
  padding: 0 10px;
}
.routate >>> .el-input__inner {
  border-radius: 10px;
  height: 35px;
}
</style>